import React, { Component } from "react";
import "../assets/css/phone.css";
class Phone extends Component {
  constructor(props) {
    super(props);

    this.state = {
      showPassword: false,
    };
    this.togglePassword = this.togglePassword.bind(this);
  }

  togglePassword() {
    this.setState({
      showPassword: !this.state.showPassword,
    });
  }

  render() {
    return (
      <div className="phone">
        <span className="text">{this.props.title}</span>
        {this.props.value ? (
          <input
            value={this.props.value}
            className="Input"
            type={
              this.props.eye
                ? this.state.showPassword
                  ? "test"
                  : "password"
                : "text"
            }
            placeholder={this.props.placeholder}
            onChange={(e) => this.props.ChangePhone(e)}
          />
        ) : (
          <input
            className="Input"
            type={
              this.props.eye
                ? this.state.showPassword
                  ? "test"
                  : "password"
                : "text"
            }
            placeholder={this.props.placeholder}
            onChange={(e) => this.props.ChangePhone(e)}
          />
        )}
        {this.props.eye && (
          <i
            onClick={this.togglePassword}
            className="password_show_icon"
            style={{
              backgroundImage: ` url(${
                require(`../assets/images/${
                  this.state.showPassword ? "eye-o" : "eye"
                }.png`).default
              })`,
            }}
          ></i>
        )}
      </div>
    );
  }
}

export default Phone;
